@import './mixin.scss';

// Media queries breakpoints
// Extra extra large screen / large size PC
$screen-xxl: 1472px;
$screen-xxl-min: $screen-xxl;

// Extra large screen / mid-size PC
$screen-xl: 1200px;
$screen-xl-min: $screen-xl;
$screen-xl-max: ($screen-xxl-min - 1px);

// Large screen / pad horizontal
$screen-lg: 992px;
$screen-lg-min: $screen-lg;
$screen-lg-max: ($screen-xl-min - 1px);

// Medium screen / pad portrait
$screen-md: 768px;
$screen-md-min: $screen-md;
$screen-md-max: ($screen-lg-min - 1px);

// Small screen / mobile phone landscape
$screen-sm: 576px;
$screen-sm-min: $screen-sm;
$screen-sm-max: ($screen-md-min - 1px);

// Extra small screen / phone
$screen-xs: 480px;
$screen-xs-min: $screen-xs;
$screen-xs-max: ($screen-sm-min - 1px);

.lv-row {
  display: flex;
  flex-flow: row wrap;
  min-width: 0;

  &::before,
  &::after {
    display: flex;
  }

  &-no-wrap {
    flex-wrap: nowrap;
  }

  &-align {
    &-start {
      align-items: flex-start;
    }

    &-center {
      align-items: center;
    }

    &-end {
      align-items: flex-end;
    }
  }

  &-start {
    justify-content: flex-start;
  }

  &-center {
    justify-content: center;
  }

  &-end {
    justify-content: flex-end;
  }

  &-space-around {
    justify-content: space-around;
  }

  &-space-between {
    justify-content: space-between;
  }

  &-space-evenly {
    justify-content: space-evenly;
  }
}

.lv-col {
  position: relative;
  max-width: 100%;
  min-height: 0.01rem; // 防止空列塌陷
}

@include grid();

@include grid(-xs);

@media (min-width: $screen-sm-min) {
  @include grid(-sm);
}

@media (min-width: $screen-md-min) {
  @include grid(-md);
}

@media (min-width: $screen-lg-min) {
  @include grid(-lg);
}

@media (min-width: $screen-xl-min) {
  @include grid(-xl);
}

@media (min-width: $screen-xxl-min) {
  @include grid(-xxl);
}
